<template>
  <div class="one_echarts_div" v-loading="loading" element-loading-text="拼命加载中" style="width: 100%;height: 100%;">
    <div ref="img">
      <div class="top_btn">
        <div v-if="titArr.length>=1" class="btn_div" :class="[oneIsBool ? 'border-unactive' : '']"
          @click="handleClick(1)">{{titArr[0]}}———</div>
        <div v-if="titArr.length>=2" class="btn_div two" :class="[twoIsBool ? 'border-unactive' : '']"
          @click="handleClick(2)">{{titArr[1]}}·······</div>
        <div v-if="titArr.length==3" class="btn_div three" :class="[threeIsBool ? 'border-unactive' : '']"
          @click="handleClick(3)">{{titArr[2]}}- - - - -</div>
      </div>
      <div class="alarm_visualization_configuration" ref="one"></div>
    </div>
    <img @click="download" class="download_img" src="../../assets/img/download.png" alt="">
    <div style="position: relative">
      <div class="box_ball_div_one_first" v-if="!oneIsBool&&titArr.length>=1">
        <div style="width: 80px; margin-right: 10px">{{titArr[0]}}:</div>
        <BarGraph zb="X轴" v-if="x" :config="firstConfigX" />
        <BarGraph zb="Y轴" v-if="y" :config="firstConfigY" />
        <BarGraph zb="Z轴" v-if="z" :config="firstConfigZ" />
      </div>
      <div class="box_ball_div_one_first" v-if="!twoIsBool&&titArr.length>=2">
        <div style="width: 80px; margin-right: 10px">{{titArr[1]}}:</div>
        <BarGraph zb="X轴" v-if="x" :config="secondConfigX" />
        <BarGraph zb="Y轴" v-if="y" :config="secondConfigY" />
        <BarGraph zb="Z轴" v-if="z" :config="secondConfigZ" />
      </div>
      <!-- <div class="box_ball_div_one_first" v-if="!threeIsBool&&titArr.length==3">
        <div style="width: 80px; margin-right: -50px">{{titArr[2]}}:</div>
        <BarGraph zb="X轴" v-if="x" />
        <BarGraph zb="Y轴" v-if="y" />
        <BarGraph zb="Z轴" v-if="z" />
      </div> -->
    </div>
  </div>
</template>

<script>
  import BarGraph from "@/components/BarGraph";
  import { dataChartData } from "@/api/data";
  import { MINUTE } from "@/data/lostCount";
  import html2Canvas from 'html2canvas';

  export default {
    components: {
      BarGraph
    },
    props: {
      // titArr: {
      //   type: Array,
      //   require: true
      // },
      // list: {
      //   type: Array,
      //   require: true
      // }
    },
    data() {
      return {
        timer: null,
        loading: false,
        list: [],
        titArr: [],
        firstConfigX: {},
        firstConfigY: {},
        firstConfigZ: {},
        secondConfigX: {},
        secondConfigY: {},
        secondConfigZ: {},
        oneIsBool: false,
        twoIsBool: false,
        threeIsBool: false,
        option: null,
        x: true,
        y: true,
        z: true,
        series: [
          {
            name: "X轴",
            showSymbol: false,
            type: "line",
            // connectNulls: true,
            data: [],
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: "solid" //'dotted'虚线 'solid'实线
                }
              }
            }
          },
          {
            name: "X轴",
            type: "line",
            showSymbol: false,
            // connectNulls: true,
            data: [],
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: "dotted" //'dotted'虚线 'solid'实线
                }
              }
            }
          },
          {
            name: "Y轴",
            showSymbol: false,
            // connectNulls: true,
            type: "line",
            data: [],
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: "solid" //'dotted'虚线 'solid'实线
                }
              }
            }
          },
          {
            name: "Y轴",
            showSymbol: false,
            // connectNulls: true,
            type: "line",
            data: [],
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: "dotted" //'dotted'虚线 'solid'实线
                }
              }
            }
          },
          {
            name: "Z轴",
            type: "line",
            showSymbol: false,
            // connectNulls: true,
            data: [],
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: "solid" //'dotted'虚线 'solid'实线
                }
              }
            }
          },
          {
            name: "Z轴",
            type: "line",
            showSymbol: false,
            // connectNulls: true,
            data: [],
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: "dotted" //'dotted'虚线 'solid'实线
                }
              }
            }
          }
        ],
        arr22: [1, 3, 4]
      };
    },
    watch: {
      list: {
        handler() {
          // 棒图
          // 第一个RTU的棒图
          if (this.list.length > 0) {
            const { measuringThreshold: cc, currentX, currentY, currentZ } = this.list[0].detail[this.list[0].detail.length - 1]
            const { xDirection, yDirection, zDirection } = cc
            this.firstConfigX = {
              current: currentX,
              thresholdPositive: xDirection == 1 ? cc.xThresholdPositive : cc.xRangePositive,
              thresholdNegative: xDirection == 1 ? cc.xRangeNegative : cc.xThresholdNegative,
              warningPositive: xDirection == 1 ? cc.xWarningPositive : cc.xThresholdPositive,
              warningNegative: xDirection == 1 ? cc.xThresholdNegative : cc.xWarningNegative,
              totalRange: xDirection == 1 ? Number(cc.xThresholdPositive) + Number(Math.abs(cc.xRangeNegative)) : Number(cc.xRangePositive) + Number(Math.abs(cc.xThresholdNegative)),
              direction: xDirection
            };
            this.firstConfigY = {
              current: currentY,
              thresholdPositive: yDirection == 1 ? cc.yThresholdPositive : cc.yRangePositive,
              thresholdNegative: yDirection == 1 ? cc.yRangeNegative : cc.yThresholdNegative,
              warningPositive: yDirection == 1 ? cc.yWarningPositive : cc.yThresholdPositive,
              warningNegative: yDirection == 1 ? cc.yThresholdNegative : cc.yWarningNegative,
              totalRange: yDirection == 1 ? Number(cc.yThresholdPositive) + Number(Math.abs(cc.yRangeNegative)) : Number(cc.yRangePositive) + Number(Math.abs(cc.yThresholdNegative)),
              direction: yDirection
            };
            this.firstConfigZ = {
              current: currentZ,
              thresholdPositive: zDirection == 1 ? cc.zThresholdPositive : cc.zRangePositive,
              thresholdNegative: zDirection == 1 ? cc.zRangeNegative : cc.zThresholdNegative,
              warningPositive: zDirection == 1 ? cc.zWarningPositive : cc.zThresholdPositive,
              warningNegative: zDirection == 1 ? cc.zThresholdNegative : cc.zWarningNegative,
              totalRange: zDirection == 1 ? Number(cc.zThresholdPositive) + Number(Math.abs(cc.zRangeNegative)) : Number(cc.zRangePositive) + Number(Math.abs(cc.zThresholdNegative)),
              direction: zDirection
            };

            const { measuringThreshold: ccc, currentX: xVal, currentY: yVal, currentZ: zVal } = this.list[1].detail[this.list[1].detail.length - 1]
            const { xDirection: x, yDirection: y, zDirection: z } = ccc
            // 第二个RTU的棒图
            this.secondConfigX = {
              current: xVal,
              thresholdPositive: x == 1 ? ccc.xThresholdPositive : ccc.xRangePositive,
              thresholdNegative: x == 1 ? ccc.xRangeNegative : ccc.xThresholdNegative,
              warningPositive: x == 1 ? ccc.xWarningPositive : ccc.xThresholdPositive,
              warningNegative: x == 1 ? ccc.xThresholdNegative : ccc.xWarningNegative,
              totalRange: x == 1 ? Number(ccc.xThresholdPositive) + Number(Math.abs(ccc.xRangeNegative)) : Number(ccc.xRangePositive) + Number(Math.abs(ccc.xThresholdNegative)),
              direction: x
            };
            this.secondConfigY = {
              current: yVal,
              thresholdPositive: y == 1 ? ccc.yThresholdPositive : ccc.yRangePositive,
              thresholdNegative: y == 1 ? ccc.yRangeNegative : ccc.yThresholdNegative,
              warningPositive: y == 1 ? ccc.yWarningPositive : ccc.yThresholdPositive,
              warningNegative: y == 1 ? ccc.yThresholdNegative : ccc.yWarningNegative,
              totalRange: y == 1 ? Number(ccc.yThresholdPositive) + Number(Math.abs(ccc.yRangeNegative)) : Number(ccc.yRangePositive) + Number(Math.abs(ccc.yThresholdNegative)),
              direction: y
            };
            this.secondConfigZ = {
              current: zVal,
              thresholdPositive: z == 1 ? ccc.zThresholdPositive : ccc.zRangePositive,
              thresholdNegative: z == 1 ? ccc.zRangeNegative : ccc.zThresholdNegative,
              warningPositive: z == 1 ? ccc.zWarningPositive : ccc.zThresholdPositive,
              warningNegative: z == 1 ? ccc.zThresholdNegative : ccc.zWarningNegative,
              totalRange: z == 1 ? Number(ccc.zThresholdPositive) + Number(Math.abs(ccc.zRangeNegative)) : Number(ccc.zRangePositive) + Number(Math.abs(ccc.zThresholdNegative)),
              direction: z
            };

            this.series.forEach(item => {
              this.$set(item, "data", []);
            });
          }

          // 折线图
          if (this.list.length > 0) {
            const chartsList = [];
            this.list.forEach(item => {
              chartsList.push(item.detail);
            });
            for (let j = 0; j < chartsList.length; j++) {
              const nowList = chartsList[j];
              for (let i = 0; i < nowList.length; i++) {
                const info = nowList[i];
                // X轴
                this.series[j].data.push({
                  name: info.rtuName + "-X轴",
                  value: info.currentX
                })
                if (j == 0) {
                  // Y轴
                  this.series[2].data.push({
                    name: info.rtuName + "-Y轴",
                    value: info.currentY
                  })
                  // Z轴
                  this.series[4].data.push({
                    name: info.rtuName + "-Z轴",
                    value: info.currentZ
                  })
                } else if (j == 1) {
                  // Y轴
                  this.series[3].data.push({
                    name: info.rtuName + "-Y轴",
                    value: info.currentY
                  })
                  // Z轴
                  this.series[5].data.push({
                    name: info.rtuName + "-Z轴",
                    value: info.currentZ
                  })
                }
              }
            }
            console.log("series", this.series);
            this.$nextTick(() => {
              this.initEcharts();
            });
          }
        },

        deep: true,
        // immediate: true,
      },
      x(val) {
        if (val) {
          // alert("打开X轴");
        } else {
          // alert("关闭X轴");
        }
      },
      y(val) {
        if (val) {
          // alert("打开Y轴");
        } else {
          // alert("关闭Y轴");
        }
      },
      z(val) {
        if (val) {
          // alert("打开Z轴");
        } else {
          // alert("关闭Z轴");
        }
      }
    },
    async created() {
      await this.dataChartData();
      this.timer = setInterval(async () => {
        await this.dataChartData();
      }, 60000);
    },
    destroyed() {
      clearInterval(this.timer);
      this.timer = null;
    },
    methods: {
      download() {
        const ref = this.$refs.img // 截图区域
        html2Canvas(ref, {
          backgroundColor: '#fff',
          useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        }).then((canvas) => {
          const dataURL = canvas.toDataURL('image/png')
          const creatDom = document.createElement('a')
          document.body.appendChild(creatDom)
          creatDom.href = dataURL
          creatDom.download = `${new Date().getFullYear()}年${new Date().getMonth() + 1}月${new Date().getDate()}日 ${new Date().getHours()}点${new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes()}`;
          creatDom.click()
        })
      },
      // 获取图表数据
      async dataChartData() {
        try {
          this.loading = true;
          const { code, result: { data }, message } = await dataChartData({
            uuid: JSON.parse(localStorage.getItem("uuid")),
            rtuIndex: JSON.parse(localStorage.getItem("rtuIndexList")),
            startTimeInSecond: Math.floor(Date.now() / 1000) - 86400,
            endTimeInSecond: Math.floor(Date.now() / 1000)
          });
          if (code == 0) {
            console.log("接口返回的折线图数据", data);
            const arr = JSON.parse(JSON.stringify(data));
            arr.sort((firtsDetails, secondDetails) => new Date(firtsDetails.detail[0].dataTime).getTime() - new Date(secondDetails.detail[0].dataTime).getTime());
            arr[0].detail.forEach((item, index) => {
              item.dataTime = this.handleFormatter(item);
              item.currentX = Math.round(item.currentX + item.initialX);
              item.currentY = Math.round(item.currentY + item.initialY);
              item.currentZ = Math.round(item.currentZ + item.initialZ);
            });
            arr[1].detail.forEach((item, index) => {
              item.dataTime = this.handleFormatter(item);
              item.currentX = Math.round(item.currentX + item.initialX);
              item.currentY = Math.round(item.currentY + item.initialY);
              item.currentZ = Math.round(item.currentZ + item.initialZ);
            });
            this.$set(arr[0], "detail", this.unipFun2(arr[0].detail));
            this.$set(arr[1], "detail", this.unipFun2(arr[1].detail));
            this.list = arr;
            // ===================================
            let rtuArr1 = [];
            for (let index = 0; index < this.list[0].detail.length; index++) {
              let item = this.list[0].detail[index];
              const first = new Date(rtuArr1.slice(-1)).getTime();
              const last = new Date(item.dataTime).getTime();
              if (rtuArr1.length != 0) {// 从第二次开始比较
                if (last - first != 60000) { // 需要补
                  if (last - first >= MINUTE) {
                    this.list[0].detail.splice(index, 0, {
                      rtuName: this.list[0].rtuName,
                      currentX: "",
                      currentY: "",
                      currentZ: "",
                      dataTime: this.handleFormatter({ dataTime: first + 60000 }),
                      // id: Date.now()
                    });
                  } else {
                    this.list[0].detail.splice(index, 0, {
                      rtuName: this.list[0].rtuName,
                      currentX: this.list[0].detail[index - 1].currentX,
                      currentY: this.list[0].detail[index - 1].currentY,
                      currentZ: this.list[0].detail[index - 1].currentZ,
                      dataTime: this.handleFormatter({ dataTime: first + 60000 }),
                      // id: Date.now()
                    });
                  }
                  // 最后将时间添加到数组
                  rtuArr1.push(this.handleFormatter({ dataTime: first + 60000 }));
                } else { // 直接添加
                  rtuArr1.push(item.dataTime);
                }
              } else {
                // 第一次直接添加
                rtuArr1.push(item.dataTime);
              }
            }
            // 补数rtu2
            let rtuArr2 = [];
            for (let index = 0; index < this.list[1].detail.length; index++) {
              let item = this.list[1].detail[index];
              const first = new Date(rtuArr2[rtuArr2.length - 1]).getTime();
              const last = new Date(item.dataTime).getTime();
              if (rtuArr2.length != 0) {// 从第二次开始比较
                if (last - first != 60000) { // 需要补
                  if (last - first >= MINUTE) {
                    this.list[1].detail.splice(index, 0, {
                      rtuName: this.list[1].rtuName,
                      currentX: "",
                      currentY: "",
                      currentZ: "",
                      dataTime: this.handleFormatter({ dataTime: first + 60000 }),
                      // id: Date.now()
                    });
                  } else {
                    this.list[1].detail.splice(index, 0, {
                      rtuName: this.list[1].rtuName,
                      currentX: this.list[1].detail[index - 1].currentX,
                      currentY: this.list[1].detail[index - 1].currentY,
                      currentZ: this.list[1].detail[index - 1].currentZ,
                      dataTime: this.handleFormatter({ dataTime: first + 60000 }),
                      // id: Date.now()
                    });
                  }
                  // 最后将时间添加到数组
                  rtuArr2.push(this.handleFormatter({ dataTime: first + 60000 }));
                } else { // 直接添加
                  rtuArr2.push(item.dataTime);
                }
              } else {
                // 第一次直接添加
                rtuArr2.push(item.dataTime);
              }
            }
            // ===================================

            // this.list.sort((firtsDetails, secondDetails) => secondDetails.detail.length - firtsDetails.detail.length);
            const bigTime = this.list[0].detail[0].dataTime;
            const smallTime = this.list[1].detail[0].dataTime;
            const time = Math.floor((new Date(smallTime).getTime() - new Date(bigTime).getTime()) / 1000 / 60);
            for (let i = 0; i < time; i++) {
              const firstDetail = this.list[1].detail[0];
              const second = 60 * 1000;
              const firstDataTime = Math.floor(new Date(firstDetail.dataTime).getTime() - second);
              this.list[1].detail.unshift({
                rtuName: firstDetail.rtuName,
                currentX: "",
                currentY: "",
                currentZ: "",
                dataTime: this.handleFormatter({ dataTime: firstDataTime }),
                id: Date.now()
              });
            }
            console.log("处理后的折线图数据", this.list);
            this.loading = false;
            this.titArr = this.list.map(item => item.rtuName);
          }
        } catch (err) {
          console.log("调用接口报错了", err);
        }
      },
      handleFormatter(row) {
        return `${new Date(row.dataTime).getFullYear()}-${new Date(row.dataTime).getMonth() + 1}-${new Date(row.dataTime).getDate()} ${new Date(row.dataTime).getHours()}:${new Date(row.dataTime).getMinutes() < 10 ? "0" + new Date(row.dataTime).getMinutes() : new Date(row.dataTime).getMinutes()}`;
      },
      unipFunc(arr) {
        let arr1 = []; //存id
        let newArr = []; //存新数组
        for (let i in arr) {
          if (arr1.indexOf(arr[i].dataTime) == -1) {
            arr1.push(arr[i].dataTime);
            newArr.push(arr[i]);
          }
        }
        return newArr;
      },
      unipFun2(arr) {
        let arr1 = [];
        let newArr = [];
        for (let i = arr.length - 1; i >= 0; i--) {
          if (arr1.indexOf(arr[i].dataTime) == -1) {
            arr1.unshift(arr[i].dataTime);
            newArr.unshift(arr[i]);
          }
        }
        return newArr;
      },
      handleClick(type) {
        this.x = this.y = this.z = true;

        if (type == 1) {
          this.oneIsBool = !this.oneIsBool;
          if (this.oneIsBool) {
            // 关闭
            try {
              for (let i = this.series.length - 1; i >= 0; i--) {
                if (this.series[i].data.length) {
                  const name = this.series[i].data[0].name;
                  if (name.length != 0 && name.includes(this.titArr[0])) {
                    this.$delete(this.series, i);
                  }
                } else {
                  this.$delete(this.series, i);
                }
              }
            } catch (error) {
              console.log("循环报错了", error);
            }
          } else {
            this.x = this.y = this.z = true;
            // 打开
            const dataX = this.list[0].detail.map(item => {
              return {
                name: item.rtuName + "-X轴",
                value: item.currentX
              }
            });
            const dataY = this.list[0].detail.map(item => {
              return {
                name: item.rtuName + "-Y轴",
                value: item.currentY
              }
            });
            const dataZ = this.list[0].detail.map(item => {
              return {
                name: item.rtuName + "-Z轴",
                value: item.currentZ
              }
            });
            const arr = [
              {
                name: "X轴",
                type: "line",
                showSymbol: false,
                data: dataX,
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 2,
                      type: "solid" //'dotted'虚线 'solid'实线
                    }
                  }
                }
              },
              {
                name: "Y轴",
                type: "line",
                showSymbol: false,
                data: dataY,
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 2,
                      type: "solid" //'dotted'虚线 'solid'实线
                    }
                  }
                }
              },
              {
                name: "Z轴",
                type: "line",
                showSymbol: false,
                data: dataZ,
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 2,
                      type: "solid" //'dotted'虚线 'solid'实线
                    }
                  }
                }
              }
            ];
            this.series.unshift(...arr);
          }
        } else if (type == 2) {
          this.twoIsBool = !this.twoIsBool;
          if (this.twoIsBool) {
            // 关闭
            try {
              for (let i = this.series.length - 1; i >= 0; i--) {
                if (this.series[i].data.length) {
                  const name = this.series[i].data[0].name;
                  if (name.length != 0 && name.includes(this.titArr[1])) {
                    this.$delete(this.series, i);
                  }
                } else {
                  this.$delete(this.series, i);
                }
              }
            } catch (error) {
              console.log("循环报错了", error);
            }
          } else {
            this.x = this.y = this.z = true;
            // 打开
            const dataX = this.list[1].detail.map(item => {
              return {
                name: item.rtuName + "-X轴",
                value: item.currentX
              }
            });
            const dataY = this.list[1].detail.map(item => {
              return {
                name: item.rtuName + "-Y轴",
                value: item.currentY
              }
            });
            const dataZ = this.list[1].detail.map(item => {
              return {
                name: item.rtuName + "-Z轴",
                value: item.currentZ
              }
            });
            const arr = [
              {
                name: "X轴",
                type: "line",
                showSymbol: false,
                data: dataX,
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 2,
                      type: "dotted" //'dotted'虚线 'solid'实线
                    }
                  }
                }
              },
              {
                name: "Y轴",
                type: "line",
                showSymbol: false,
                data: dataY,
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 2,
                      type: "dotted" //'dotted'虚线 'solid'实线
                    }
                  }
                }
              },
              {
                name: "Z轴",
                type: "line",
                showSymbol: false,
                data: dataZ,
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 2,
                      type: "dotted" //'dotted'虚线 'solid'实线
                    }
                  }
                }
              }
            ];
            this.series.push(...arr);
          }
        }
        this.$set(this.option, "series", this.series);
        this.$nextTick(() => {
          this.updateEcharts();
        });
      },
      updateEcharts() {
        const echarts = require("echarts");
        this.$echarts.dispose(this.$refs["one"]);
        const myChart = this.$echarts.init(this.$refs["one"]);
        const _this = this;
        myChart.on("legendselectchanged", function (paramas) {
          if (paramas.name == "X轴") {
            if (paramas.selected["X轴"]) {
              // alert("打开X轴");
              _this.x = true;
            } else {
              // alert("关闭X轴");
              _this.x = false;
            }
          } else if (paramas.name == "Y轴") {
            if (paramas.selected["Y轴"]) {
              // alert("打开Y轴");
              _this.y = true;
            } else {
              // alert("关闭Y轴");
              _this.y = false;
            }
          } else {
            if (paramas.selected["Z轴"]) {
              // alert("打开Z轴");
              _this.z = true;
            } else {
              // alert("关闭Z轴");
              _this.z = false;
            }
          }
        });
        myChart.setOption(this.option);
      },
      initEcharts() {
        console.log("第一个传感器", this.list[0].detail.length);
        console.log("第二个传感器", this.list[1].detail.length);

        const echarts = require("echarts");
        const myChart = this.$echarts.init(this.$refs["one"]);
        const _this = this;
        myChart.on("legendselectchanged", function (paramas) {
          if (paramas.name == "X轴") {
            if (paramas.selected["X轴"]) {
              // alert("打开X轴");
              _this.x = true;
            } else {
              // alert("关闭X轴");
              _this.x = false;
            }
          } else if (paramas.name == "Y轴") {
            if (paramas.selected["Y轴"]) {
              // alert("打开Y轴");
              _this.y = true;
            } else {
              // alert("关闭Y轴");
              _this.y = false;
            }
          } else {
            if (paramas.selected["Z轴"]) {
              // alert("打开Z轴");
              _this.z = true;
            } else {
              // alert("关闭Z轴");
              _this.z = false;
            }
          }
        });

        this.option = {
          // title: {
          //   text: "传感器详情"
          // },
          tooltip: {
            confine: true,
            appendToBody: true,
            trigger: "axis",
            formatter: function (info) {
              var res = null;
              if (info.length == 6) {
                res = `<div>
                        <div style="
                                    display: inline-block;
                                    width:  10px;
                                    height: 20px;
                                    color: ${info[0].color}
                                "
                        >
                            ●
                        </div>
                        <span>${info[0].name + ": " + Math.round(info[0].value)}</span>
                    </div>
                    <div>
                        <div style="
                                    display: inline-block;
                                    width:  10px;
                                    height: 20px;
                                    color: ${info[0].color}
                                "
                        >
                            ●
                        </div>
                        <span>${info[1].name + ": " + Math.round(info[1].value)}</span>
                    </div>
                    <div>
                        <div style="
                                    display: inline-block;
                                    width:  10px;
                                    height: 20px;
                                    color: ${info[2].color}
                                "
                        >
                            ●
                        </div>
                        <span>${info[2].name + ": " + Math.round(info[2].value)}</span>
                    </div>
                    <div>
                        <div style="
                                    display: inline-block;
                                    width:  10px;
                                    height: 20px;
                                    color: ${info[2].color}
                                "
                        >
                            ●
                        </div>
                        <span>${info[3].name + ": " + Math.round(info[3].value)}</span>
                    </div>
                    <div>
                        <div style="
                                    display: inline-block;
                                    width:  10px;
                                    height: 20px;
                                    color: ${info[4].color}
                                "
                        >
                            ●
                        </div>
                        <span>${info[4].name + ": " + Math.round(info[4].value)}</span>
                    </div>
                    <div>
                        <div style="
                                    display: inline-block;
                                    width:  10px;
                                    height: 20px;
                                    color: ${info[4].color}
                                "
                        >
                            ●
                        </div>
                        <span>${info[5].name + ": " + Math.round(info[5].value)}</span>
                    </div>`;
              } else if (info.length == 5) {
                res = `<div>
                        <div style="
                                    display: inline-block;
                                    width:  10px;
                                    height: 20px;
                                    color: ${info[0].color}
                                "
                        >
                            ●
                        </div>
                        <span>${info[0].name + ": " + Math.round(info[0].value)}</span>
                    </div>
                    <div>
                        <div style="
                                    display: inline-block;
                                    width:  10px;
                                    height: 20px;
                                    color: ${info[0].color}
                                "
                        >
                            ●
                        </div>
                        <span>${info[1].name + ": " + Math.round(info[1].value)}</span>
                    </div>
                    <div>
                        <div style="
                                    display: inline-block;
                                    width:  10px;
                                    height: 20px;
                                    color: ${info[2].color}
                                "
                        >
                            ●
                        </div>
                        <span>${info[2].name + ": " + Math.round(info[2].value)}</span>
                    </div>
                    <div>
                        <div style="
                                    display: inline-block;
                                    width:  10px;
                                    height: 20px;
                                    color: ${info[2].color}
                                "
                        >
                            ●
                        </div>
                        <span>${info[3].name + ": " + Math.round(info[3].value)}</span>
                    </div>
                    <div>
                        <div style="
                                    display: inline-block;
                                    width:  10px;
                                    height: 20px;
                                    color: ${info[4].color}
                                "
                        >
                            ●
                        </div>
                        <span>${info[4].name + ": " + Math.round(info[4].value)}</span>
                    </div>`;
              } else if (info.length == 4) {
                res = `<div>
                        <div style="
                                    display: inline-block;
                                    width:  10px;
                                    height: 20px;
                                    color: ${info[0].color}
                                "
                        >
                            ●
                        </div>
                        <span>${info[0].name + ": " + Math.round(info[0].value)}</span>
                    </div>
                    <div>
                        <div style="
                                    display: inline-block;
                                    width:  10px;
                                    height: 20px;
                                    color: ${info[1].color}
                                "
                        >
                            ●
                        </div>
                        <span>${info[1].name + ": " + Math.round(info[1].value)}</span>
                    </div>
                    <div>
                        <div style="
                                    display: inline-block;
                                    width:  10px;
                                    height: 20px;
                                    color: ${info[2].color}
                                "
                        >
                            ●
                        </div>
                        <span>${info[2].name + ": " + Math.round(info[2].value)}</span>
                    </div>
                    <div>
                        <div style="
                                    display: inline-block;
                                    width:  10px;
                                    height: 20px;
                                    color: ${info[3].color}
                                "
                        >
                            ●
                        </div>
                        <span>${info[3].name + ": " + Math.round(info[3].value)}</span>
                    </div>`;
              } else if (info.length == 3) {
                res = `<div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[0].name + ": " + Math.round(info[0].value)}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[1].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[1].name + ": " + Math.round(info[1].value)}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[2].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[2].name + ": " + Math.round(info[2].value)}</span>
              </div>`;
              } else if (info.length == 2) {
                res = `<div>
                          <div style="
                            display: inline-block;
                            width:  10px;
                            height: 20px;
                            color: ${info[0].color}
                                  "
                          >●</div>
                          <span>${info[0].name + ": " + Math.round(info[0].value)}</span>
                        </div>
                        <div>
                          <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[1].color}
                            ">●</div>
                            <span>${info[1].name + ": " + Math.round(info[1].value)}</span>
                        </div>`;
              } else if (info.length == 1) {
                res = `<div>
                          <div style="
                            display: inline-block;
                            width:  10px;
                            height: 20px;
                            color: ${info[0].color}
                                  "
                          >●</div>
                          <span>${info[0].name + ": " + Math.round(info[0].value)}</span>
                        </div>`;
              }
              return res;
            }
          },
          legend: {
            data: ["X轴", "Y轴", "Z轴"],
            selected: {}
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "5%",
            top: "11%",
            containLabel: true
          },
          // toolbox: {
          //   feature: {
          //     saveAsImage: {}
          //   }
          // },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.list[0].detail.map(item => {
              const newDate = new Date(item.dataTime);
              const month = newDate.getMonth() + 1;
              const date = newDate.getDate();
              const hours = newDate.getHours();
              const minutes = newDate.getMinutes();
              // return `${month}-${date} ${hours}:${minutes < 10 ? "0"+ minutes : minutes}`;
              return `${hours}:${minutes < 10 ? "0" + minutes : minutes}`;
            })
          },
          yAxis: {
            type: "value"
          },
          // 时间筛选
          dataZoom: [
            {
              type: "inside", //inside鼠标缩放
              show: true,
              start: 0,
              end: 1000,
              xAxisIndex: [0]
            }
          ],
          series: this.series
        };
        myChart.setOption(this.option);
      }
    }
  };
</script>

<style scoped>
  .one_echarts_div {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .one_echarts_div .download_img {
    width: 50px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 10px;
  }

  .alarm_visualization_configuration {
    width: 100%;
    height: 400px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
  }

  .top_btn {
    display: flex;
    margin-bottom: 20px;
    position: absolute;
    z-index: 10;
  }

  .btn_div {
    /* width: 110px; */
    cursor: pointer;
    border: 1px solid red;
    margin-left: 20px;
    color: 1;
    user-select: none;
  }

  .two {
    border-style: dotted;
  }

  .three {
    border-style: dashed;
  }

  .border-unactive {
    border-color: transparent;
  }

  .box_ball_div_one_first {
    display: flex;
    padding: 20px 100px;
    align-items: center;
    box-sizing: border-box;
    justify-content: center;
  }

  .coordinate_system {
    display: flex;
    width: 60%;
    margin-left: 20%;
    position: absolute;
  }
</style>